@portabletext/toolkit is a JavaScript toolkit for working with Portable Text, a JSON-based rich text format. It provides utilities for parsing, serializing, and rendering Portable Text content, making it easier to integrate rich text content into web applications.

What are @portabletext/toolkit's main functionalities?

Parsing Portable Text

This feature allows you to parse Portable Text into plain text. The `toPlainText` function takes Portable Text JSON and converts it into a plain text string.

const { toPlainText } = require('@portabletext/toolkit');
const portableText = [
  { _type: 'block', children: [{ _type: 'span', text: 'Hello, world!' }] }
];
const plainText = toPlainText(portableText);
console.log(plainText); // Output: 'Hello, world!'

Serializing Portable Text

This feature allows you to serialize plain text into Portable Text format. The `toPortableText` function takes a plain text string and converts it into Portable Text JSON.

const { toPortableText } = require('@portabletext/toolkit');
const plainText = 'Hello, world!';
const portableText = toPortableText(plainText);
console.log(portableText); // Output: [{ _type: 'block', children: [{ _type: 'span', text: 'Hello, world!' }] }]

Rendering Portable Text

This feature allows you to render Portable Text content in a React application. The `PortableText` component takes Portable Text JSON as a prop and renders it as React elements.

const { PortableText } = require('@portabletext/toolkit');
const portableText = [
  { _type: 'block', children: [{ _type: 'span', text: 'Hello, world!' }] }
];
const React = require('react');
const ReactDOM = require('react-dom');
ReactDOM.render(
  React.createElement(PortableText, { value: portableText }),
  document.getElementById('root')
);

Other packages similar to @portabletext/toolkit